<template>
  <a-modal title-align="start" title="批量生成SKU" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="600">
    <div class="title-bar">生成范围</div>
    <div>
      <a-radio-group v-model="createType">
        <a-radio value="A">仅将空值生成库存SKU</a-radio>
        <a-radio value="B">所有变体都生成库存SKU</a-radio>
      </a-radio-group>
    </div>
    <div class="title-bar">库存SKU生成规则</div>
    <a-space>
      <a-input v-model="firstSkuName" placeholder="请输入" />
      <span>-</span>
      <a-select style="width: 160px" v-model="secondType">
        <a-option value="A">自增数字</a-option>
        <a-option value="B">随机四位数</a-option>
        <a-option value="C">变体属性</a-option>
      </a-select>
    </a-space>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue'
  import { defineComponent, ref, computed } from 'vue'
  let props = defineProps(['modelValue', 'type', 'info'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let createType = ref('A')
  let firstSkuName = ref('')
  let secondType = ref('A')

  const submit = () => {
    if (!firstSkuName.value[0]) return Message.error('请输入SKU前缀')
    emits('save', { createType: createType.value, firstSkuName: firstSkuName.value, secondType: secondType.value })
    showvisible.value = false
  }
</script>

<style lang="less" scoped></style>
